<template>
	<view class="">
		<view class="main1">
			<view style="width: 100%;height: 1rpx;"></view>
			<view class="store-main">
				<image :src="data.goods[0].image" mode="" style="width: 144rpx;height: 144rpx;"></image>
				<view class="store-right">
					<view class="right-top">
						{{data.goods[0].title}}
					</view>
					<view class="right-center">
						{{data.goods[0].difference}}
					</view>
					<view class="right-money">
						<text style="font-size: 24rpx;">￥</text>{{data.goods[0].actual_payment}}
					</view>
					<view class="right-num">
						<view class="num-sp">
							× {{data.goods[0].number}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="Resection">
			<view class="Resectionbox">
				<view class="Resectionbox-sp">
					退款类型
				</view>
				<view class="Reselector" @click="choseType">
					<input type="text" disabled="dasabled" v-model="type" class="Reipt"/>
					<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/Store/right.png" mode="" style="width: 18rpx;height: 20rpx;"></image>
				</view>
			</view>
			
			<view class="Resectionbox">
				<view class="Resectionbox-sp">
					退款原因
				</view>
				<view class="Reselector" @click="show1 = true">
					<input type="text" disabled="dasabled" v-model="name" class="Reipt" />
					<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/Store/right.png" mode="" style="width: 18rpx;height: 20rpx;"></image>
				</view>
			</view>
		</view>
		<view class="num">
			<view style="width: 100%;height: 1rpx;"></view>
			<view class="num-num">
				<view class="num-title">
					退款数量
				</view>
				<view class="number">
					{{data.goods[0].number}}
				</view>
			</view>
			<view class="num-num" style="margin-top: 44rpx;">
				<view class="num-title">
					退款金额
				</view>
				<view class="number" style="color: #E05944;font-size: 32rpx;">
					￥{{data.pay.actual_payment}}
				</view>
			</view>
			<view class="quan">
				<view class="quanbox">
					<view class="quansp">
						购物券
					</view>
					<view class="quannum" style="font-size: 24rpx;">
						退款申请通过后购物券将原路返回
					</view>
				</view>
			</view>
		</view>
		<view class="illustrate">
			<view style="width: 100%;height: 1rpx;"></view>
			<view class="illustrate-box">
				<view class="illustrate-sp">
					申请说明
				</view>
				<view class="illustrate-num">
					{{fontnum}}/200
				</view>
			</view>
			
			<view class="textarea-box">
				<textarea 
				class="textarea" 
				placeholder="请详情填写申请说明..." 
				placeholder-style="font-size:28rpx" 
				maxlength="200" 
				@input="descInput" 
				v-model="desc" />
			</view>
			<view style="margin-top: 5rpx;">
				<u-upload
				ref="img"  
				width="160rpx" 
				height="160rpx" 
				max-count="999" 
				:action="uploadUrl" 
				:header="uploadHeader" 
				:file-list="imglist" ></u-upload>
			</view>
		</view>
		<view style="width: 100%;height: 120rpx;"></view>
		
		<view class="submit">
			<view class="subbtn" @click="submit">
				提交申请
			</view>
		</view>
		
		
		<u-select v-model="show" :list="list" @confirm='confirm' @cancel='cancel'></u-select>
		<u-popup v-model="show1" mode="bottom" :closeable='true' border-radius="24" height='836'>
			<view class="modelbox" style="background-color: #EFFCF4;width: 100%;height: 100%;" >
				<view style="width: 100%;height: 1rpx;"></view>
				<view class="box-sp">
					请选择退款原因
				</view>
				<view class="selebox">
					<view style="width: 100%;height: 1rpx;"></view>
					<view class="selebox1" v-for="(item,index) in list1" :key="index" @click="raido(item,index)">
						<view class="sele-sp">
							{{item.name}}
						</view>
						<image
						src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shop/%E5%8D%95%E9%80%89_%E9%80%89%E4%B8%AD%401x.png" 
						mode="" 
						v-if="item.reason == count"
						style="width: 38rpx;height: 38rpx;"></image>
						<image 
						src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shop/%E5%8D%95%E9%80%89_%E6%9C%AA%E9%80%89%401x.png" 
						mode="" 
						v-else
						style="width: 38rpx;height: 38rpx;"></image>
						
					</view>
				</view>
				<view class="boxbtn">
					<view class="boxbtnsp" @click="sumb">
						确认
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:'',
				show:false,
				show1:false,
				imglist:[],
				uploadUrl: this.$u.api.user.getUploadUrl(),
				uploadHeader: this.$u.api.user.getUploadHeader(),
				list: [
					{
						value: 0,
						label: '仅退款'
					},
					{
						value: 1,
						label: '退货退款'
					}
				],
				list1: [
					{
						name: '不喜欢/不想要',
						reason:0
					},
					{
						name: '空包裹/坏包裹',
						reason:1
					},
					{
						name: '未送达/物流太慢',
						reason:2
					},
					{
						name: '颜色/尺码不符合',
						reason:3
					},
					{
						name: '质量有问题',
						reason:4
					},
					{
						name: '少件/漏发',
						reason:5
					},
					{
						name: '盗版/假冒品牌',
						reason:6
					}
				],
				count:-1,
				desc: '',
				name:'点击选择退款原因',
				type:"点击选择退款类型",
				fontnum:0,
				form:{
					type:'',
					reason:''
				}
			}
		},
		onLoad(option) {
			console.log(option);
			this.order_id = option.order_id
			this.$u.api.shop.getOrderInfo({id:option.order_id}).then(res =>{
				if(res.code == 1){
					this.data = res.data
				}
			})
		},
		methods:{
			submit(){
				let imglist = [];
				let hasUploadstorehj = false
				this.form.goods_id = this.data.goods[0].id
				this.form.pay_id = this.data.pay.id
				this.form.order_id = this.data.id
				this.form.money = this.data.pay.actual_payment
				this.form.refund_content = this.desc
			
				this.$refs.img.lists.forEach(item => {
					if(item.progress < 100){
						hasUploadstorehj = true
						return true
					}
					if(item?.response == undefined && item?.url){
						
						imglist = item.url
						return true
					}
						 
					if((item?.response?.status != 200 || item?.response?.data == undefined || item?.response?.data == '')){
						return true
					}
					imglist.push(item.response.data)
				})
				if(hasUploadstorehj){
					this.$u.toast('有图片正在上传，请耐心等待')
					return false
				}
				this.imglist = imglist.join(',');
				this.form.images = this.imglist
				if(this.form.type ==="" || this.form.reason ===""){
					uni.showToast({
						title: '退款类型或退款原因不能为空！',
						icon: 'none',
						duration: 2000
					}) 
				}else{
					this.$u.api.shop.Refund(this.form).then(res =>{
						console.log(res);
						if(res.code == 1){
							uni.showToast({
								title: '申请成功！',
								icon: 'success',
								duration: 1500
							}) 
							setTimeout(() =>{
								uni.navigateBack({
									delta: 1,
								})
							},1500)
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 1500
							}) 
							setTimeout(() =>{
								uni.navigateBack({
										delta: 1,
								})
							},1500)
						}
					})
				}
			},
			descInput(e) {
				this.fontnum = e.detail.value.length
			},
			raido(item,index){
				this.count = item.reason
				this.name = item.name
			},
			sumb(){
				this.form.reason = this.count
				this.show1 = false
			},
			confirm(e){
				console.log(e);
				this.show = false
				this.type = e[0].label
				this.form.type = e[0].value
				this.form.expressType = e[0].value
			},
			cancel(){
				this.show = false
			},
			choseType(){
				uni.showActionSheet({
					itemList: this.list.map(item => item.label),
					success: (res) => {
						this.type = this.list[res.tapIndex].label
						this.form.type = this.list[res.tapIndex].value
						this.form.expressType = this.list[res.tapIndex].value
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	
	.main1{
		width: 690rpx;
		height: 216rpx;
		background-color: white;
		border-radius: 16rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		position: relative;
	}
	.main-store{
		width: 662rpx;
		height: 26rpx;
		margin-left: 28rpx;
		/* background-color: antiquewhite; */
		display: flex;
		align-items: center;
	}
	.store-name{
		min-width: 140rpx;
		height: 24rpx;
		font-size: 28rpx;
		color: #192524;
		font-weight: bold;
		line-height: 24rpx;
	}
	.store-main{
		width: 630rpx;
		height: 144rpx;
		display: flex;
		justify-content: space-between;
		margin-left: 30rpx;
		margin-top: 39rpx;
	}
	.store-right{
		width: 474rpx;
		height: 144rpx;
		position: relative;
		/* background-color: skyblue; */
	}
	.right-top{
		width: 100%;
		height: 28rpx;
		line-height: 28rpx;
		font-size: 28rpx;
		color: black;
		overflow:hidden;
		 white-space: nowrap;
		 text-overflow: ellipsis;
		 -o-text-overflow:ellipsis;
	}
	.right-center{
		width: 100%;
		height: 20rpx;
		line-height: 24rpx;
		font-size: 24rpx;
		color: #888888;
		margin-top: 20rpx;
	}
	.right-money{
		min-width: 130rpx;
		height: 28rpx;
		font-size: 36rpx;
		color: #192524;
		position: absolute;
		bottom: 5rpx;
		line-height: 28rpx;
	}
	.right-num{
		width: 170rpx;
		height: 44rpx;
		position: absolute;
		bottom: 0rpx;
		right: 30rpx;
	}
	.Resection{
		width: 690rpx;
		// height: 196rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		border-radius: 16rpx;
		background-color: white;
		
	}
	.Resectionbox{
		width: 630rpx;
		height: 98rpx;
		border-bottom: #EEEEEE 1rpx solid;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.Resectionbox-sp{
		font-size: 28rpx;
		font-weight: bold;
		width: 150rpx;
		height: 24rpx;
		line-height: 24rpx;
		color: #192524;
	}
	.Reselector{
		min-width: 180rpx;
		max-width: 480rpx;
		height: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #192524;
	}
	.Reipt{
		text-align: right;
		margin-right: 10rpx;
	}
	.box-sp{
		font-size: 32rpx;
		color: #192524;
		font-weight: bold;
		width: 100%;
		text-align: center;
		margin-top: 25rpx;
	}
	.selebox{
		width: 690rpx;
		height: 600rpx;
		margin-left:30rpx;
		margin-top: 56rpx;
		background-color: white;
		border-radius: 16rpx;
	}
	.selebox1{
		width: 630rpx;
		margin-top: 40rpx;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 40rpx;
	}
	.sele-sp{
		font-size: 32rpx;
		color: #192524;
	}
	.boxbtn{
		width: 750rpx;
		background-color: white;
		height: 110rpx;
		position: fixed;
		bottom: 0;
	}
	.boxbtnsp{
		width: 690rpx;
		margin-left: 30rpx;
		height: 82rpx;
		border-radius: 44rpx;
		background-color: #36BE6A;
		text-align: center;
		line-height: 82rpx;
		color: white;
		margin-top: 10rpx;
	}
	.num{
		width: 690rpx;
		height: 326rpx;
		background-color: white;
		margin-left: 30rpx;
		margin-top: 20rpx;
		border-radius: 16rpx;
	}
	.num-num{
		width: 630rpx;
		height: 24rpx;
		line-height: 24rpx;
		font-weight: bold;
		margin-top: 44rpx;
		margin-left: 30rpx;
		color: black;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
	}
	.quan{
		width: 630rpx;
		height: 96rpx;
		margin-left: 30rpx;
		margin-top: 40rpx;
		background-color: #F9F9F9;
		
	}
	.quanbox{
		width: 630rpx;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
		color: black;
	}
	.illustrate{
		width: 690rpx;
		// height: 362rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		background-color: white;
		border-radius: 16rpx;
	}
	.illustrate-box{
		width: 630rpx;
		margin-top: 29rpx;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.illustrate-sp{
		width: 128rpx;
		height: 32rpx;
		font-size: 32rpx;
		color: #192524;
		line-height: 32rpx;
		font-weight: bold;
	}
	.illustrate-num{
		height: 20rpx;
		font-size: 24rpx;
		color: #999999;
		line-height: 20rpx;
	}
	.textarea-box{
		width: 630rpx;
		height: 80rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		border: none;
	}
	.textarea{
		width: 100%;
		height: 100%;
	}
	.submit{
		width: 100%;
		height: 116rpx;
		position: fixed;
		bottom: 0;
		background-color: white;
		z-index: 999;
	}
	.subbtn{
		width: 690rpx;
		height: 80rpx;
		margin-left: 30rpx;
		margin-top: 18rpx;
		color: white;
		font-size: 32rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #36BE6A;
		border-radius: 44rpx;
	}
</style>